//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import React, {
	PureComponent,
	Fragment
} from 'react';
import Js2WordCloud from 'js2wordcloud';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import {
	Row,
	Col,
	Card,
	Form,
	Input,
	Select,
	Icon,
	Button,
	Modal,
	message,
	Divider,
	Table,
	DatePicker,
  Timeline
} from 'antd';
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import RadarCharts from './radarCharts';
import styles from './ProUserList.less';
import {getValue} from '@/utils/globalcommon';
import {initTotalList} from '@/utils/globalcommon';
import policeDraw from '@/assets/policedraw.jpg';
const FormItem = Form.Item;
const { Option } = Select;
const { confirm } = Modal;
const { RangePicker } = DatePicker;


/* eslint react/no-multi-comp:0 */
@connect(({
	lawpolicy,
	loading
}) => ({
	lawpolicy,
	loading: loading.models.lawpolicy,
}))

@Form.create()
class ProPoliceDrawList extends PureComponent {
	state = {
		modalVisible: false,
    modalVisibleByWork: false,
		updateModalVisible: false,
		viewModalVisible: false,
		expandForm: false,
		selectedRows: [],
		formValues: {},
		updateFormValues: {},
		viewFormValues: {},
		requestModelName:"lawpolicy",
		currentPage: 1,
		pageSize: 10,
	};


  //警衔弹窗显示
  handleModalByVisible = flag => {
  	this.setState({
  		modalVisible: !!flag,
  	});
  };

  //工作经历弹窗显示
  handleModalByWork = flag => {
  	this.setState({
  		modalVisibleByWork: !!flag,
  	});
  };


	componentDidMount() {

    var canvas = document.getElementById('canvas');
    const _this = this;
        //生成

        var wc = new Js2WordCloud(canvas);
        wc.setOption({
            tooltip: {
              show: true,
            },
            list: [['李某', 10], ['人民警察', 9], ['一级警督', 8], ['一级警长', 7],['事业编制', 6],['统一招录', 5], ['综合管理警官', 5],['已婚', 5],['50岁', 4],['本科', 4], ['荣获嘉奖五次', 4],['中共党员', 4],['汉族', 3],['男', 3]],
            color: 'random-light',
            // ellipticity: 1,
            // shape:"ellipse",
            backgroundColor: 'rgba(255,255,255,0)',
            // imageShape: 'https://liangbizhi.github.io/js2wordcloud/shape/twitter.png',
            // imageShape: '//cdn.weimob.com/saas/zhan/images/4.21/tuoyuna.png',
            weightFactor: 40,
            fontSizeFactor: 0.1,  // 当词云值相差太大，可设置此值进字体行大小微调，默认0.1
            maxFontSize: 40, // 最大fontSize，用来控制weightFactor，默认60
            minFontSize: 20,
            rotateRatio: 0,
            gridSize: 41,
            click(item, dimension, event) { //支持点击事件
                console.log(item);
                if(item[0] == "一级警督") {
                    _this.handleModalByVisible(true);
                }else if(item[0] == "李某") {
                    _this.handleModalByWork(true);
                }
            }
        })

	}


	renderSimpleForm() {
		const {
			form: {
				getFieldDecorator
			}
		} = this.props;
		return(
		<Form onSubmit={this.handleSearch} layout="inline">
	      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				<Col md={8} sm={24}>
		        	<FormItem label="姓名">
		        		{getFieldDecorator('lawpolicy')(<Input placeholder="请输入" />)}
					</FormItem>
	    		</Col>
		    	<Col md={8} sm={24}>
			        <FormItem label="时间">
				        {getFieldDecorator('starttime')(
				        	<RangePicker format={"YYYY-MM-DD"} style={{ width: '100%' }} placeholder={['开始时间', '结束时间']} />
				        )}
			    	</FormItem>
			    </Col>
			    <Col md={8} sm={24}>
			        <span className={styles.submitButtons}>
			        <Button type="primary" htmlType="submit">
			        	查询
			        </Button>
			        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
			        	重置
			        </Button>
			        {/*<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
			        	展开 <Icon type="down" />
			        </a>*/}
			        </span>
		        </Col>
	        </Row>
        </Form>
		);
	}

	renderAdvancedForm() {
		const {
			form: {
				getFieldDecorator
			}
		} = this.props;
		return(
			<Form onSubmit={this.handleSearch} layout="inline">
		      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					<Col md={8} sm={24}>
			        	<FormItem label="姓名">
			        		{getFieldDecorator('flzcgd')(<Input placeholder="请输入" />)}
						</FormItem>
		    		</Col>
			    	<Col md={8} sm={24}>
				        <FormItem label="时间">
					        {getFieldDecorator('starttime')(

					        	<RangePicker format={"YYYY-MM-DD"} style={{ width: '100%' }} placeholder={['开始时间', '结束时间']} />

					        )}
				    	</FormItem>
				    </Col>
		    	</Row>
			    <div style={{ overflow: 'hidden' }}>
					<div style={{ marginBottom: 24 }}>
					<Button type="primary" htmlType="submit">
			        查询
			        </Button>
			        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
			        重置
			        </Button>
			        <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
			        收起 <Icon type="up" />
			        </a>
		        	</div>
		        </div>
        </Form>
		);
	}

	renderForm() {
		const {
			expandForm
		} = this.state;

		return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
	}

	render() {
		const {
			loading
		} = this.props;

		const { modalVisible,modalVisibleByWork } = this.state;

       const dataByPoliceRank = [
          {
            year: "1990",
            rank: "二级警员"
          },
          {
            year: "1991",
            rank: "二级警员"
          },
          {
            year: "1992",
            rank: "二级警员"
          },
          {
            year: "1993",
            rank: "二级警员"
          },
          {
            year: "1994",
            rank: "一级警员"
          },
          {
            year: "1995",
            rank: "一级警员"
          },
          {
            year: "1996",
            rank: "一级警员"
          },
          {
            year: "1997",
            rank: "一级警员"
          },
          {
            year: "1998",
            rank: "三级警司"
          },
          {
            year: "1999",
            rank: "三级警司"
          },
          {
            year: "2000",
            rank: "三级警司"
          },
          {
            year: "2001",
            rank: "三级警司"
          },
          {
            year: "2002",
            rank: "三级警司"
          },
          {
            year: "2003",
            rank: "二级警司"
          },
          {
            year: "2004",
            rank: "二级警司"
          },
          {
            year: "2005",
            rank: "二级警司"
          },
          {
            year: "2006",
            rank: "二级警司"
          },
          {
            year: "2007",
            rank: "一级警司"
          },
          {
            year: "2008",
            rank: "一级警司"
          },
          {
            year: "2009",
            rank: "一级警司"
          },
          {
            year: "2010",
            rank: "三级警督"
          },
          {
            year: "2011",
            rank: "三级警督"
          },
          {
            year: "2012",
            rank: "三级警督"
          },
          {
            year: "2013",
            rank: "三级警督"
          },
          {
            year: "2014",
            rank: "二级警督"
          },
          {
            year: "2015",
            rank: "二级警督"
          },
          {
            year: "2016",
            rank: "二级警督"
          },
          {
            year: "2017",
            rank: "二级警督"
          },
          {
            year: "2018",
            rank: "二级警督"
          },
          {
            year: "2019",
            rank: "一级警督"
          },

        ];

        const dataByRank = [
           {
             year: "1990",
             rank: "二级科员"
           },
           {
             year: "1991",
             rank: "二级科员"
           },
           {
             year: "1992",
             rank: "二级科员"
           },
           {
             year: "1993",
             rank: "二级科员"
           },
           {
             year: "1994",
             rank: "一级科员"
           },
           {
             year: "1995",
             rank: "一级科员"
           },
           {
             year: "1996",
             rank: "一级科员"
           },
           {
             year: "1997",
             rank: "一级科员"
           },
           {
             year: "1998",
             rank: "四级主任科员"
           },
           {
             year: "1999",
             rank: "四级主任科员"
           },
           {
             year: "2000",
             rank: "四级主任科员"
           },
           {
             year: "2001",
             rank: "四级主任科员"
           },
           {
             year: "2002",
             rank: "三级主任科员"
           },
           {
             year: "2003",
             rank: "三级主任科员"
           },
           {
             year: "2004",
             rank: "三级主任科员"
           },
           {
             year: "2005",
             rank: "二级主任科员"
           },
           {
             year: "2006",
             rank: "二级主任科员"
           },
           {
             year: "2007",
             rank: "二级主任科员"
           },
           {
             year: "2008",
             rank: "一级主任科员"
           },
           {
             year: "2009",
             rank: "一级主任科员"
           },
           {
             year: "2010",
             rank: "一级主任科员"
           },
           {
             year: "2011",
             rank: "一级主任科员"
           },
           {
             year: "2012",
             rank: "四级调研员"
           },
           {
             year: "2013",
             rank: "四级调研员"
           },
           {
             year: "2014",
             rank: "四级调研员"
           },
           {
             year: "2015",
             rank: "四级调研员"
           },
           {
             year: "2016",
             rank: "三级调研员"
           },
           {
             year: "2017",
             rank: "三级调研员"
           },
           {
             year: "2018",
             rank: "三级调研员"
           },
           {
             year: "2019",
             rank: "二级调研员"
           },

         ];


            const cols = {
              sales: {
                tickInterval: 20
              }
            };

		return(
			<PageHeaderWrapper title="民警全息画像">
        <Modal
        	width={500}
        	centered
        	destroyOnClose
        	title="工作经历记录"
        	visible={modalVisibleByWork}
        	onCancel={()=> this.handleModalByWork()}
          footer={<Button key="back" onClick = {() => this.handleModalByWork()}>取消</Button>}
        	>
                <Timeline>
                  <Timeline.Item color="green">1989-1993年 xx包头大队战士 </Timeline.Item>
                  <Timeline.Item color="green">1993-1996年 xx后勤处农场排职管理员</Timeline.Item>
                  <Timeline.Item color="green">1997-2001年 xx呼和浩特市大队管理员</Timeline.Item>
                  <Timeline.Item color="green">2001-2004年 xx后勤部战勤科副营职参谋</Timeline.Item>
                  <Timeline.Item color="green">2004-2008年 xx后勤部财务科正营职助理</Timeline.Item>
                  <Timeline.Item color="green">2008-2012年 xx后勤部财务科科长</Timeline.Item>
                  <Timeline.Item color="green">2012-2015年 xx后勤部副部长</Timeline.Item>
                  <Timeline.Item color="green">2015-2017年 xx公安厅指挥中心未定职</Timeline.Item>
                  <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />} color="red">
                    2017-至今 xx公安厅指挥中心副调研员
                  </Timeline.Item>
                </Timeline>

        </Modal>
        <Modal
        	width={500}
        	centered
        	destroyOnClose
        	title="警衔变动记录"
        	visible={modalVisible}
        	onCancel={()=> this.handleModalByVisible()}
          footer={<Button key="back" onClick = {() => this.handleModalByVisible()}>取消</Button>}
        	>
                <Timeline>
                  <Timeline.Item color="green">1989年3月10日 授予二级警员警衔 </Timeline.Item>
                  <Timeline.Item color="green">1993年4月20日 晋升一级警员警衔</Timeline.Item>
                  <Timeline.Item color="green">1997年5月15日 晋升三级警司警衔</Timeline.Item>
                  <Timeline.Item color="green">2001年6月25日 晋升二级警司警衔</Timeline.Item>
                  <Timeline.Item color="green">2001年6月25日 晋升二级警司警衔</Timeline.Item>
                  <Timeline.Item color="green">2004年8月20日 晋升一级警司警衔</Timeline.Item>
                  <Timeline.Item color="green">2010年9月10日 晋升三级警督警衔</Timeline.Item>
                  <Timeline.Item color="green">2014年10月20日 晋升二级警督警衔</Timeline.Item>
                  <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />} color="red">
                    2019年8月25日 晋升一级警督警衔
                  </Timeline.Item>
                </Timeline>

        </Modal>
        <Card bordered={false} style={{minHeight: '1000px'}}>
          <div className={styles.proUsertableList}>
            <div className={styles.radarStyle}>
                <RadarCharts />
            </div>
            <div className={styles.proUsertableListForm}>{this.renderForm()}</div>
                <div style={{textAlign: 'center',marginLeft: '40px'}}>
                  <img id="print"  alt="" src={policeDraw} style={{width: '70%'}}/>
                </div>
                <div className={styles.wordCloud}>
                    <div id="canvas" style={{width:'500px',height:'400px'}}></div>
                </div>
                <Card title={<Button type="primary">民警工作经历</Button>} bordered={false} className={styles.workHistroy}>
                  <p>1989-1993 xx包头大队战士</p>
                  <p>1993-1996 xx后勤处农场排职管理员</p>
                  <p>1997-2001 xx呼和浩特市大队管理员</p>
                  <p>2001-2004 xx后勤部战勤科副营职参谋</p>
                  <p>2004-2008 xx后勤部财务科正营职助理</p>
                  <p>2008-2012 xx后勤部财务科科长</p>
                  <p>2012-2015 xx后勤部副部长</p>
                  <p>2015-2017 xx公安厅指挥中心未定职</p>
                  <p>2017-至今 xx公安厅指挥中心副调研员</p>
                </Card>
                <Card title={<Button type="primary">民警荣誉奖励</Button>} bordered={false} className={styles.policeReward}>
                  <p>2004年12月经xxx公安厅批准，个人二等功</p>
                  <p>2007年1月经xxx公安局批准，个人三等功</p>
                  <p>2008年7月经xxx公安厅批准，个人二等功</p>
                  <p>2011年1月经xxx公安厅批准，其他荣誉称号</p>
                  <p>2011年9月经xxx公安厅批准，个人二等功</p>
                </Card>
                <Card title={<Button type="danger">民警违规记录</Button>} bordered={false} className={styles.observeRules}>
                  <p>李某-2019年10月20日在某十字路口闯红灯</p>
                  <p>李某-2019年12月20日在某娱乐场所存在违规行为</p>
                </Card>
                <Card title={<Button type="danger">民警政治思想问题记录</Button>} bordered={false} className={styles.politicalAnalysis}>
                  <p>李某存在非常严重xx问题</p>
                  <p>李某存在严重xx问题</p>
                  <p>李某存在比较严重xxx问题</p>
                </Card>
                <Card title={<Button type="danger">民警身体健康问题</Button>} bordered={false} className={styles.healthAnalysis}>
                  <p>李某患有腿部残疾</p>
                </Card>
                <div className={styles.healthLine}></div>
          </div>
          <div style={{position: 'relative',marginTop: "140px"}}>
              <div style={{marginLeft: '30px'}}>警衔</div>
              <Chart height={400} data={dataByPoliceRank} scale={cols} forceFit>
                <Axis name="year" />
                <Axis name="rank" />
                <Tooltip
                  // crosshairs用于设置 tooltip 的辅助线或者辅助框
                  // crosshairs={{
                  //  type: "y"
                  // }}
                />
                <Geom type="line" position="year*rank"/>
                    <Geom
                      type="point"
                      position="year*rank"
                      size={4}
                      shape={'circle'}
                      style={{ stroke: '#fff', lineWidth: 1 }}
                    />
              </Chart>
          </div>
          <div style={{position: 'relative'}}>
              <div style={{marginLeft: '30px'}}>职级</div>
              <Chart height={400} data={dataByRank} scale={cols} forceFit>
                <Axis name="year" />
                <Axis name="rank" />
                <Tooltip
                  // crosshairs用于设置 tooltip 的辅助线或者辅助框
                  // crosshairs={{
                  //  type: "y"
                  // }}
                />
                <Geom type="line" position="year*rank"/>
                    <Geom
                      type="point"
                      position="year*rank"
                      size={4}
                      shape={'circle'}
                      style={{ stroke: '#fff', lineWidth: 1 }}
                    />
              </Chart>
          </div>
        </Card>

    </PageHeaderWrapper>
		);
	}
}

export default ProPoliceDrawList;
